<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>预警系统-报表</title>
<link rel="stylesheet" type="text/css"
	href="/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="/themes/icon.css">
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/js/util.js"></script>
<script type="text/javascript" src="/js/eui_manager.js"></script>
</head>
<body>
	<ul id="nav"></ul>
	<div id="cc" class="easyui-layout" fit="true">
		<div region="north" style="height: 50px;">
			<div style="margin: 10px;" id="condtionDiv">
				<label for="bTime">开始</label> <input class="easyui-datetimebox"
					name="bTime" id="bTime"
					data-options="required:true,showSeconds:false" value=""> <label
					for="eTime">结束</label> <input class="easyui-datetimebox"
					name="eTime" id="eTime"
					data-options="required:true,showSeconds:false" value=""> <label
					for="project">开发</label><input id="name" name="name" value="">
				<label for="project">工程</label><input id="project" name="project"
					value="">
				<button onclick="reloadTable()">查询</button>
			</div>
		</div>
		<div region="center" fit="true">
			<table id="dg"></table>
		</div>
		<div region="east" title="堆栈详情" style="width: 40%; margin: 2px;">
			<strong id="info"></strong> 总数:<strong id="total">0</strong> 当前:<strong
				id="curNum">0</strong> <a href="javascript:void(0);"
				onclick="gotoPrv()">上一条</a> <a href="javascript:void(0);"
				onclick="gotoNext()">下一条</a>
			<hr>
			<div id="detail"></div>
		</div>
	</div>
	<script type="text/javascript">
		var url = '/ui/';
		var tbl = $('#dg');
		var now = new Date();
		var curPage = 0;
		var allKeys = [];
		var addTime = 1000 * 60;
		var clsName = 'com.itrip.log.module.db.domain.EmailRecord';
		$('#bTime').val(now.Format('MM/dd/yyyy 00:00'));
		$('#eTime').val(now.Format('MM/dd/yyyy HH:mm'));
		var action = new UIAction(tbl, clsName, url, getFormVal);

		function showInfo(num) {
			$('#curNum').text(num + 1);
			var rd = allKeys[num];
			if (!rd) {
				return $("#detail").val("没有匹配的数据");
			}
			$.get('/jmonitor/getValue?id=' + rd.kvid, function(res) {
				$("#info").text("收件人:" + rd.name + " 工程:" + rd.project);
				if (res.info)
					$("#detail").html(res.info);
				else {
					$("#detail").html(res.data);
				}
			});
		}

		function gotoPrv() {
			curPage--;
			if (curPage < 0)
				curPage = allKeys.length - 1;
			showInfo(curPage);
		}

		function gotoNext() {
			curPage++;
			if (curPage >= allKeys.length)
				curPage = 0;
			showInfo(curPage);
		}

		function getFormVal() {
			var arr = {
				'project' : Util.getCombobox('#project'),
				'name' : Util.getCombobox('#name'),
				'bTime' : getTime('#bTime'),
				'eTime' : getTime('#eTime'),
			};
			return arr;
		}

		function reloadTable() {
			$('#dg').datagrid('reload');
		}

		function showDetail(project, name) {
			$.get('/jmonitor/getIds', {
				"start" : getTime('#bTime'),
				"end" : getTime('#eTime'),
				"project" : project,
				"name" : name,
			}, function(data) {
				curPage = 0;
				allKeys = data.data;
				$('#total').text(allKeys.length);
				gotoPrv();
			});
		}

		$(function() {
			var columns = [ [
					{
						field : 'id',
						title : '总数',
						width : '5%',
					},
					{
						field : 'project',
						title : '工程',
						width : '10%',
					},
					{
						field : 'name',
						title : '开发',
						width : '10%',
					},
					{
						field : 'manager',
						title : '负责人',
						width : '10%',
					},
					{
						field : 'keyword',
						title : '触发器',
						width : '10%',
					},
					{
						field : 'pv',
						title : '调用次数',
						width : '5%',
					},
					{
						field : 'bugs',
						title : 'Bug/PV',
						width : '5%',
						formatter : function(value, row, index) {
							return row['bugsrate'].toFixed(2);
						}
					},
					{
						field : 'action',
						title : '操作',
						width : '5%',
						formatter : function(index, row) {
							return '<button onclick="showDetail(\''
									+ row['project'] + '\',\'' + row['name']
									+ '\')">堆栈</button>';
						}
					} ] ];

			Util.builCombox('#name', '/ui/select?id=queryProject', 'name','name');
			Util.builCombox('#project', '/ui/select?id=queryUserGroup', 'name','name');
			initNavMenu('#nav');
			action.configTable(null, columns);
		});
	</script>
</body>
</html>
